@import '~ng-devui/styles-var/devui-var.scss';

$header-z-index: calc(#{$devui-z-index-framework} - 1);

:host ::ng-deep section h4,
:host ::ng-deep section h5 {
  font-weight: bold;
  color: $devui-text-weak;
}

:host ::ng-deep section {
  margin-bottom: 50px;
}

.examples-viewer-title {
  display: flex;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: bold;
}

.examples {
  position: relative;
  padding: 30px;
  background: $devui-base-bg;
}

div.html,
div.typescript,
div.markdown {
  padding: 0;
}

.html pre,
.typescript pre,
.markdown pre {
  padding: 26.5px;
}

:host ::ng-deep pre table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

:host h1 {
  position: sticky;
  top: 50px;
  z-index: $header-z-index;
  margin-top: 0;
  padding: 30px 0 20px 0;
  line-height: 25px;
}

.devui-docs-header {
  z-index: $header-z-index;
}

.d-website-demo-tabs {
  position: sticky;
  top: 120px;
  z-index: $header-z-index;
}

.devui-title-container {
  background: rgba(248, 248, 250, 0.9);
  position: absolute;
  height: calc(100% + 50px);
  width: calc(100vw - 20px);
  top: 0;
  margin: 0 -15vw 0 -25vw;
  backdrop-filter: blur(6px);
}

::ng-deep {
  body[ui-theme='devui-dark-theme'],
  body[ui-theme='galaxy-theme'] {
    .devui-title-container {
      background: rgba(26, 26, 28, 0.9);
    }
  }
}

::ng-deep {
  body[ui-theme='deep-theme'] {
    .devui-title-container {
      background: rgba(242, 242, 243, 0.9);
    }
  }
}
